<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作Html文档</title>
    <style type="text/css">
        .initDiv{
            display: block;
            width: 100px;
            height: 120px;
            margin-left: 100px;
            margin-top: 50px;
            padding: 10px 10px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery操作Html文档—— 在元素内部插入子元素</legend>
        <div class="initDiv" id="testDiv1">
            我是div1
        </div>
        <button id="btn1">在元素内后面追加内容</button>
        <button id="btn2">将p元素追加到div内(后面追加)</button>
        <button id="btn3">在元素内前面追加内容</button>
        <button id="btn4">将p元素追加到div内(前面追加)</button>
    </fieldset>

    <fieldset>
        <legend>jQuery操作Html文档—— 在元素外部插入其它元素</legend>
        <div class="initDiv" id="testDiv2">
            我是div2
        </div>
        <button id="btn5">在元素同级之后插入内容</button>
        <button id="btn6">在元素同级之前插入内容</button>
        <button id="btn7">将p元素插入到id为testDiv2元素的后面</button>
        <button id="btn8">将p元素插入到id为testDiv2元素的前面</button>
    </fieldset>

    <fieldset>
        <legend>jQuery操作Html文档—— 标签替换</legend>
        <div class="initDiv" id="testDiv3">
            我是div3
            <p>div3→p1</p>
            <span>div3→span1</span>
            <p>div3→p2</p>
            <span>div3→span2</span>
        </div>
        <button id="btn9">将所有匹配的p标签替换成指定的HTML或DOM元素</button>
        <button id="btn10">用匹配的元素替换掉所有selector匹配到span的元素</button>
    </fieldset>
    <fieldset>
        <legend>jQuery操作Html文档—— 删除标签内的子元素</legend>
        <div class="initDiv" id="testDiv4">
            我是div4
            <p id="p1">
                div4→p1
                <span>div4→p1→span1</span>
            </p>
            <p id="p2">
                div4→p2
                <span>div4→p2→span2</span>
            </p>
        </div>
        <button id="btn11">删除匹配的元素集合中所有的子节点，不包括本身</button>
        <button id="btn12">删除所有匹配的元素,包括本身</button>
    </fieldset>
    <fieldset>
        <legend>jQuery操作Html文档—— 克隆元素</legend>
        <div class="initDiv" id="testDiv5">
            我是div5
            <button id="btn_1">div5→按钮一</button>
            <button id="btn_2">div5→按钮二</button>
        </div>
        <button id="btn13">克隆按钮一(不复制事件处理函数)</button>
        <button id="btn14">克隆按钮二(复制事件处理函数)</button>
    </fieldset>
</body>

<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
     *      //页面加载完成后的处理，固定写法
     * });
     *
     */
    $(function () {
        $("#btn1").click(function () {
            $("#testDiv1").append("<b>NYL</b>");//在元素内后面追加内容
        });
        $("#btn2").click(function () {
            $("<p>GACL</p>").appendTo("#testDiv1");//将p元素追加到div内(后面追加)
        });
        $("#btn3").click(function () {
            $("#testDiv1").prepend("<b>Hello</b>");  //在元素内前面追加内容
        });
        $("#btn4").click(function () {
            $("<p>XDP</p>").prependTo("#testDiv1"); //将p元素追加到div内(前面追加)
        });


        $("#btn5").click(function () {
            $("#testDiv2").after("<b>楼姐</b>");     //在元素同级之后插入内容
        });
        $("#btn6").click(function () {
            $("#testDiv2").before("<b>孤傲苍狼</b>");    //在元素同级之前插入内容
        });
        $("#btn7").click(function () {
            $("<p>楼楼</p>").insertAfter("#testDiv2");     //将p元素插入到id为testDiv2元素的后面
        });
        $("#btn8").click(function () {
            $("<p>小楼</p>").insertBefore("#testDiv2");    //将p元素插入到id为testDiv2元素的前面
        });

        $("#btn9").click(function () {
            $("p").replaceWith("<b>XDP_GACL. </b>");    //将所有匹配的p标签替换成指定的HTML或DOM元素
        });
        $("#btn10").click(function () {
            $("<b>GACL_XDP. </b>").replaceAll("span");     //用匹配的元素替换掉所有selector匹配到的元素
        });

        $("#btn11").click(function () {
            $("#p1").empty();//删除匹配的元素集合中所有的子节点，不包括本身
        });
        $("#btn12").click(function () {
            $("#p2").remove();    //删除所有匹配的元素,包括本身
        });

        $("#btn_1").click(function () {
            alert($(this).text());
        });
        $("#btn_2").click(function () {
            alert($(this).text());
        });

        $("#btn13").click(function () {
            var btn = $("#btn_1").clone();//克隆按钮，但不克隆按钮的事件处理函数
            btn.appendTo("#testDiv5");//将克隆得到的元素追加到div内(后面追加)
        });
        $("#btn14").click(function () {
            $("#btn_2")
                .clone(true)//克隆按钮，并且克隆按钮的事件处理函数(布尔值指事件处理函数是否会被复制)
                .appendTo("#testDiv5");//将克隆得到的元素追加到div内(后面追加)
        });

    });
    
</script>
</html>